<template>
  <div class="detail-container">
    <Header />
    <div class="content">
      <button @click="goBack" class="back-btn">← 返回列表</button>
      
      <div class="member-detail-card">
        <h2>成员详情</h2>
        
        <div class="detail-section">
          <div class="detail-item">
            <span class="label">序号：</span>
            <span class="value">{{ memberIndex + 1 }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">姓名：</span>
            <span class="value">{{ member.name }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">学号：</span>
            <span class="value">{{ member.studentId }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">学院：</span>
            <span class="value">{{ member.college }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">部门：</span>
            <span class="value">{{ member.department }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">职位：</span>
            <span class="value">{{ member.position }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">联系方式：</span>
            <span class="value">{{ member.phone }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">入社时间：</span>
            <span class="value">{{ member.joinDate }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">备注：</span>
            <span class="value">{{ member.remark || '无' }}</span>
          </div>
        </div>
        
        <div class="operation-buttons">
          <button @click="handleEdit" class="btn-edit">编辑</button>
          <button @click="handleDelete" class="btn-delete">删除</button>
        </div>
      </div>
      
      <div class="member-tasks">
        <h3>负责事务</h3>
        <table class="task-table">
          <thead>
            <tr>
              <th>事务名称</th>
              <th>类型</th>
              <th>状态</th>
              <th>截止时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="task in memberTasks" :key="task.id">
              <td>{{ task.name }}</td>
              <td>{{ task.type }}</td>
              <td><span :class="task.status === '已完成' ? 'status-done' : 'status-progress'">{{ task.status }}</span></td>
              <td>{{ task.deadline }}</td>
            </tr>
            <tr v-if="memberTasks.length === 0">
              <td colspan="4" class="no-data">暂无负责事务记录</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const memberId = parseInt(route.params.id)

// 成员数据
const members = ref([
  { id: 1, name: '张明', studentId: '2021010', college: '计算机学院', department: '办公室', position: '部长', phone: '13800138010', joinDate: '2021-09-01', remark: '负责办公室全面工作' },
  { id: 2, name: '李华', studentId: '2021011', college: '信息学院', department: '办公室', position: '副部长', phone: '13800138011', joinDate: '2021-09-01', remark: '负责物资管理' },
  { id: 3, name: '王芳', studentId: '2022012', college: '软件学院', department: '办公室', position: '干事', phone: '13800138012', joinDate: '2022-03-15', remark: '负责会议记录' }
])

// 任务数据
const tasks = ref([
  { id: 1, name: '物资盘点', type: '日常工作', status: '已完成', deadline: '2023-09-10', responsible: '李华' },
  { id: 2, name: '会议记录整理', type: '日常工作', status: '进行中', deadline: '2023-09-30', responsible: '王芳' },
  { id: 3, name: '制定办公室规章制度', type: '管理工作', status: '进行中', deadline: '2023-10-15', responsible: '张明' },
  { id: 4, name: '采购办公用品', type: '物资管理', status: '已完成', deadline: '2023-09-05', responsible: '李华' }
])

// 当前成员信息
const member = ref({})
const memberIndex = ref(-1)
const memberTasks = ref([])

// 初始化数据
onMounted(() => {
  // 获取成员详情
  const foundMember = members.value.find(m => m.id === memberId)
  if (foundMember) {
    member.value = foundMember
    memberIndex.value = members.value.findIndex(m => m.id === memberId)
  } else {
    alert('未找到该成员信息')
    router.push('/buzhang/bangongshi')
  }
  
  // 获取该成员的负责事务
  memberTasks.value = tasks.value.filter(task => 
    task.responsible === member.value.name
  )
})

// 返回列表页
const goBack = () => {
  router.push('/buzhang/bangongshi')
}

// 编辑成员
const handleEdit = () => {
  // 跳转到编辑页面或显示编辑弹窗
  router.push('/buzhang/bangongshi')
  // 实际项目中需要通过状态管理传递编辑信息
}

// 删除成员
const handleDelete = () => {
  if (confirm(`确定要删除${member.value.name}吗？`)) {
    // 从成员列表中删除
    const index = members.value.findIndex(m => m.id === memberId)
    if (index !== -1) {
      members.value.splice(index, 1)
    }
    // 返回列表页
    router.push('/buzhang/bangongshi')
  }
}
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.content {
  flex: 1;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.back-btn {
  background: none;
  border: none;
  color: #1890ff;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.member-detail-card {
  background: white;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

h2 {
  color: #1f2329;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.detail-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.detail-item {
  display: flex;
  margin-bottom: 10px;
}

.label {
  width: 100px;
  font-weight: bold;
  color: #666;
}

.value {
  flex: 1;
  color: #333;
}

.operation-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.btn-edit {
  background-color: #52c41a;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-delete {
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.member-tasks {
  background: white;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h3 {
  color: #1f2329;
  margin-top: 0;
  margin-bottom: 20px;
}

.task-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.task-table th, .task-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
}

.task-table th {
  background-color: #f5f7fa;
  font-weight: 500;
}

.status-done {
  color: #52c41a;
  background-color: #f6ffed;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-progress {
  color: #1890ff;
  background-color: #e6f7ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 30px;
}
</style>